<template>
    <div class="cmt-count">
       <h3>发表评论</h3>
       <hr>
       <textarea placeholder="请输入要发表的内容（最多吐槽120字）" v-model="msg"></textarea>
       <mt-button type="primary" size="large" @click="publish()">primary</mt-button>
       <div class="cmt-list">
            <div class="cmt-item" v-for="(item,index) in newsList">
                <div class="cmt-title">
                    第{{index+1}}楼：&nbsp;&nbsp;用户名：{{item.src}}&nbsp;&nbsp;发表时间：{{item.time}}
                </div>
                <div class="cmt-body">
                    {{item.title}}
                </div>
            </div>      
        </div>
       <mt-button plain type="primary" size="large">更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            // pageIndex:1,
            newsList:[],
            msg:''
        }
    },
    created() {
        this.getMessage()
    },
    methods: {
		getMessage(){//获取新闻列表  jsonp解决跨域问题
			this.$http.jsonp('https://api.jisuapi.com/news/get?channel=%E5%A4%B4%E6%9D%A1&start=4&num=40&appkey=2aab973f248a3b34').then(resoult => {
				// console.log(resoult.body.result.list)
				// console.log(resoult.body)    
				if(resoult.body.status == 0){
					this.newsList=resoult.body.result.list
					// this.newsList=this.newsList.concat(resoult.body.result.list)
					Toast('加载成功')
				}else{
					Toast('加载失败')
				}
            })
            .catch(res => {
                console.log(res)
            })
        },
        // jiazai(){
        //     this.pageIndex++
        //     this.getMessage
        // }

        publish(){//提交评论
            localStorage.setItem('msg', this.msg);
            var data2 = localStorage.getItem('msg');
            this.msg=''
            // console.log(data2)
            var obj = {
                src:'米明',time:new Date(),title:data2
            }
            this.newsList.unshift(obj)
        }
    },
    props:['news']
}
</script>

<style lang="scss" scoped>
   .cmt-count{
       textarea{
           height:100px;
           margin:0
       }
       .cmt-list{
           margin:5px;
           .cmt-item{
               font-size:13px;
               .cmt-title{
                   background: #ccc;
               }
               .cmt-body{
                   text-indent:2em;
                   line-height:34px;
               }
           }
       }
   } 
</style>